<!DOCTYPE html>
<html>
<head>    
 <meta charset="utf-8">
 <title>菜鸟教程</title>
 <style>
 ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     padding-top: 6px;
     padding-bottom: 6px;
 }   
 li {
     display: inline;
 }
 a:link,a:visited
 {
     font-weight: bold;
    color: #ffffff;
    background-color: #98bf21;
    text-align: center;
    padding: 6px;
    text-decoration: none;
    text-transform: uppercase;
 }
 a:hover,a:active {
     background-color: #7a991a;
 }
 </style>
 </head>
 <body>
     <ul>
     <li><a href="#home">主页</a></li>
     <li><a href="#news">新闻</a></li>
     <li><a href="#contact">联系</a></li>
     <li><a href="#about">关于</a></li>
     </ul>
     <p><b>注意：</b>如果您只为a元素设置内边距（而不设置ul元素），那么链接会出现在ul元素之外。所以我们为ul元素添加了top和bottom内边距</p>
     </body>
</html>   